<template>
	<view class="inv-top-menu-bar">
		<view class="top-menu">
			<view class="top-menu-list">
				<view v-for="(item, index) in nav" :key="index"
					:class="parseInt(item.active) === 1 ? 't-btn active' : 't-btn'" @click="handleClick(item.href)">
					{{ item.text }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'PersonalEquallyNav',
		props: ['nav'],
		methods: {
			handleClick(path) {
				uni.navigateTo({
					url: path
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.inv-top-menu-bar {
		background: #ffffff;

		.top-menu {
			overflow: hidden;
			overflow-x: scroll;
			-webkit-overflow-scrolling: touch;

			&::-webkit-scrollbar {
				display: none;
			}
		}

		.top-menu-list {
			white-space: nowrap;

			.t-btn {
				position: relative;
				white-space: nowrap;
				display: inline-block;
				text-align: center;
				color: #666666;
				font-size: 30rpx;
				text-decoration: none;
				padding: 26rpx 0;
				-webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);
				width: 50%;

				&::after {
					position: absolute;
					left: 50%;
					bottom: 10rpx;
					width: 32rpx;
					height: 6px;
					background-color: #1787fb;
					border-radius: 100%;
					transform: translate(-50%, 0);
				}

				&.active {
					color: #1787fb;

					&::after {
						content: " ";
					}
				}
			}
		}
	}
</style>
